<!DOCTYPE html>
<html>
<#include "include/header.html"/>
<body id="ranking">
  <div class="page">
    <div class="content">
    <img src="${ctx}/resource/images/banner.png" class="banner">
    <div class="wrap">
      <!-- 导航栏 -->
      <div class="nav-wrap">
        <nav>
          <ul>
            <li><a href="${ctx}/home/homePage">返回首页</a></li>
            <li><a href="${ctx}/home/forwardExchang">拼手气</a></li>
          </ul>
        </nav>
      </div>

      <!-- 排行榜 -->

      <ul class="rank-head">
        <!-- 榜头 -->
        <li>用户</li>
        <li>活力币</li>
        <li>步数</li>
      </ul>

      <ul class="rank-body" id="championship">
        <!-- 列表 -->
      </ul>
      <div id="morePage">
      <#if championUserPageNumber lt championUserTotalPage>
       <span class="more" id="more_page" onclick="nextPage(${championUserPageNumber!}); return false;">点击加载更多...</span>			
       </#if> 
      </div>
    </div>
    </div>
  </div>
  <div class="mask"></div>
  <#include "include/foot.html"/>
</body>
<script type="text/javascript">
var htm="";
<#list championUserList as u>
 htm+="<li>";
 var rowNum="${u.rownum!}";
 htm+="<div class='index'><span>No."+rowNum+"</span></div>";
 htm+="<div class='avatar'><img src='${u.head_pic!}' alt=''></div>";
 var user_name="${u.user_name!}";
 if(user_name == null){
   user_name="";
 }
 user_name=decodeURI(user_name);
 htm+="<div class='name'><span>"+user_name+"</span></div>";
 htm+="<div class='coin'><span>${u.energy_currency!}</span></div>";
 htm+="<div class='step'><span>${u.step_number!}</span></div>";
 htm+="</li>";
</#list>
$("#championship").html(htm);
	
function scrollDown() {
  var li_h = $(".rank-body li").height();
  $(".rank-body")[0].scrollTop += li_h / 2;
}
function nextPage(pnum){
statistics(); //cnzz统计
	$("#more_page").remove();
	scrollDown();
	$.post("${ctx}/home/getChampionship",{
		page:pnum+1,
		is_page:'0'
		},function(json){
			var htmStr="";
			var pageHtm="";
			var list=json.list;
			for(var i in list){
			             htmStr+="<li>";
						 htmStr+="<div class='index'><span>No."+list[i].rownum+"</span></div>";
						 if(!list[i].head_pic){
						    //htmStr+="<img src='' alt=''>";
						 }else{
						    htmStr+="<div class='avatar'><img src='"+list[i].head_pic+"' alt=''></div>";
						 }
						 
						 var user_name=list[i].user_name;
						 if(!user_name){
						   user_name="";
						 }else{
						 user_name=decodeURI(user_name);
						 }
						 htmStr+="<div class='name'><span>"+user_name+"</span></div>";
						 var energy_currency=list[i].energy_currency;
						 if(!energy_currency){
						  energy_currency="0";
						 }
						 htmStr+="<div class='coin'><span>"+energy_currency+"</span></div>";
						 var step_number=list[i].step_number;
						 if(!step_number){
						  step_number="0";
						 }
						 htmStr+="<div class='step'><span>"+step_number+"</span></div>";
						 htmStr+="</li>";
			}
			if(json.pageNumber < json.totalPage){
				pageHtm+="<span class='more' id='more_page' onclick='nextPage("+json.pageNumber+"); return false;'>点击加载更多...</span>	";
			}
			$("#championship").append(htmStr);	
			$("#morePage").html(pageHtm);	
	},'json');
}
</script>
</html>